<template>
  <div class="home_header">
    <div class="collapse-btn" @click="collapseChage">
      <i v-if="!this.$store.getters.isCollapse" class="el-icon-s-fold"></i>
      <i v-else class="el-icon-s-unfold"></i>
    </div>
    <div class="logo">应用市场管理平台</div>
    <div class="header-right">
      <div class="admin">
        <el-dropdown size="medium" type="primary" @command="handleCommand">
          <span class="el-dropdown-link">
            {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出</el-dropdown-item>
            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog width="500px" :visible.sync="dialogPassword"  @close="blankPassword">
       <el-form :model="newHeaderPassword" :rules="accountHeaderRule" ref="headerPassword" label-position="left" label-width="100px"  style='width: 460px; margin-left:10px; '>
        <el-form-item prop="password"  label="新密码 :" >
          <el-input type="text" show-password v-model="newHeaderPassword.password" placeholder="请输入新密码" style="width: 250px;">
          </el-input>
        </el-form-item>
      </el-form> 
        <el-input v-model="newHeaderPassword.id" v-show=false ></el-input>
        <div slot="footer" class="dialog-footer">
        <el-button @click="blankPassword">取 消</el-button>
        <el-button type="success" @click="changeHeaderPasswordBtn">确 定</el-button>
      </div>
     </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dialogPassword:false, //重置密码弹窗
      // 重置密码弹窗数据
      newHeaderPassword:{
        id:'',
        password:''
      },
      //规则
      accountHeaderRule: {
        password:[
           { validator: this.validatePass,  required: true, trigger: 'blur' }
        ]
      },
    }
  },
  computed: {
    ...mapGetters(['isCollapse','nickname'])
  },
  methods: {
    changeHeaderPasswordBtn() {
      this.$refs.headerPassword.validate(async (valid) => {
        if (valid) {

        }else {
          this.$message.error('error submit!!')
          return false
        }
      })
    },
    blankPassword() {
      this.newHeaderPassword.id = ''
      this.newHeaderPassword.password = ''
      this.dialogPassword = false
    },
    // 折叠
    collapseChage() {
      this.$store.dispatch('ToggleSideBar')
    },
    // 退出
    async handleCommand(command) {
      if (command == "logout") {
        await this.$store.dispatch("LogOut");
        location.reload(); // 为了重新实例化vue-router对象 避免bug
      }else if (command == "changePassword") {
        this.dialogPassword = true
      }
    },
        // 密码校验
    validatePass(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入密码'));
      }else {
        if (this.checkPassWord(value)) {
          callback()
        }else {
          return callback(new Error('密码校验失败'));
        }
      }
    },
        checkPassWord(value) {
      let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/;
      let pass = this.lxStr(value)
      if(!pattern.test(value) || !pass) {
        return false
      }else {
        return  true
      }
    },
     lxStr(str){
   var arr = str.split('');
   var flag = true;
   for (var i = 1; i < arr.length-1; i++) {
      var firstIndex = arr[i-1].charCodeAt();
      var secondIndex = arr[i].charCodeAt();
      var thirdIndex = arr[i+1].charCodeAt();
      thirdIndex - secondIndex == 1;
      secondIndex - firstIndex==1;
      if((thirdIndex - secondIndex == 1)&&(secondIndex - firstIndex==1)){
         flag =  false;
      }
   }
   return flag;
   },
  },
};
</script>

<style lang="less" scoped>
.home_header {
  position: relative;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
  background-color: #242f42;

  .collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
  }

  .logo {
    float: left;
    width: 250px;
    line-height: 70px;
  }

  .header-right {
    float: right;
    height: 100%;
    padding-right: 50px;

    .admin {
      display: flex;
      height: 100%;
      align-items: center;
      .el-dropdown {
        color: #fff;
      }
    }
  }
}
</style>